<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="pamars">
      <el-form-item label="店铺名称">
        <el-input v-model="pamars.shop_name" placeholder="店铺名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="法人手机号码">
        <el-input v-model="pamars.lr_mobile" placeholder="法人手机号码" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" row-key="Id" border style="width: 100%; ">
      <el-table-column prop="shop_name,address,detailsAddress" align="center" label="店铺信息">
        <template slot-scope="scope">
          <div>店铺名称：{{ scope.row.shop_name }}</div>
          <div>
            店铺所在区域：{{ scope.row.province_name }}{{ scope.row.city_name
            }}{{ scope.row.area_name }}{{ scope.row.street_name }}{{ scope.row.community_name }}
          </div>
          <div>店铺地址：{{ scope.row.address }}</div>
          <div>售后电话：{{ scope.row.mobile }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="main_name,mobile" align="center" label="主体信息">
        <template slot-scope="scope">
          <div>企业名称：{{ scope.row.company_name }}</div>
          <div>统一信用代码：{{ scope.row.credit_code }}</div>
          <div>法人姓名：{{ scope.row.legal_representative }}</div>
          <div>法人手机号：{{ scope.row.lr_mobile }}</div>
          <div>证件号码：{{ scope.row.id_number }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="所属分类">
        <template slot-scope="scope">
          <div v-for="(v, i) in scope.row.union_business_classify_list" :key="v.id">{{ v.name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="gains_able" align="center" label="资金余额">
      </el-table-column>
      <el-table-column prop="is_show" align="center" label="是否显示">
        <template slot-scope="scope">
          <div>
            <el-switch v-model="scope.row.is_show" @change="changeShow(scope.row)"> </el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="commission_rate" align="center" label="提现手续费比例(%)">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="lookOver(scope.row.id, 1)">查看</el-button>
          <el-button type="text" size="small" @click="updateData(scope.row.id, 0)">修改</el-button>
          <!-- <el-button type="text" size="small" v-if="scope.row.distribution == false && isAuth('shop:allot:admin')" @click="addOrUpdateHandle(scope.row.id, scope.row.distribution)">添加后台账号</el-button> -->
          <!-- <el-button type="text" size="small" v-if="scope.row.distribution == true && isAuth('shop:update:admin')" @click="addOrUpdateHandle(scope.row.id, scope.row.distribution)">编辑账号</el-button> -->
          <el-button type="text" size="small" @click="setWithdrawHandle(scope.row)">设置商家提现手续费比例</el-button>
          <el-button type="text" size="small" @click="openSetTypeDialog(scope.row)">设置分类</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pamars.page" :page-sizes="[10, 20, 50, 100]"
      :page-size="pamars.limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList"></add-or-update>
    <!--查看-->
    <merchant-details v-if="details" ref="merchantDetails" @refreshDataList="getList"></merchant-details>
    <Update v-if="updateShow" :show.sync="updateShow" ref="detail" @submit="getList"></Update>
    <el-dialog title="设置提现比例" width="30%" :visible.sync="withdrawVisible">
      <el-input-number v-model="commission_rate" :min="0" :max="100" :step="0.01"></el-input-number>
      %
      <span slot="footer" class="dialog-footer">
        <el-button @click="withdrawVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitWithdraw">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 设置分类 -->
    <SetType ref="setType" :shop_id="shop_id" :show.sync="SetTypeShow" @change="getList()"></SetType>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
import affiliateMerchantApi from '@/api/affiliateMerchantApi.js'
import AddOrUpdate from './add-update-ID'
import merchantDetails from './merchant-details'
import Update from './audit/update'
import SetType from './setType'
export default {
  data () {
    return {
      addOrUpdateVisible: false,
      details: false,
      pamars: {
        page: 1,
        limit: 10,
        mobile: '',
        shop_name: '',
        union_business: 1
      },
      totalPage: 0,
      dataList: [],
      dataListLoading: false,
      shop_id: null,
      commission_rate: null,
      withdrawVisible: false,
      updateShow: false,
      SetTypeShow: false,
    }
  },
  components: {
    AddOrUpdate,
    merchantDetails,
    Update,
    SetType
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      seviceApi.getShopList(this.pamars).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.totalPage = res.data.page.totalCount
        }
      })
    },
    // 打开设置分类弹窗
    openSetTypeDialog (row) {
      this.shop_id = row.id;
      if (row.union_business_classify_list && row.union_business_classify_list.length > 0) {
        this.$refs.setType.form.classify_ids = row.union_business_classify_list.map(v => {
          return v.id
        })
      } else {
        this.$refs.setType.form.classify_ids = []
      }
      this.SetTypeShow = true;
    },
    changeShow (row) {
      affiliateMerchantApi.shopShow(row.id).then(res => {
        if (res && res.data.code == 200) {
          this.$message.success('修改成功！')
        }
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pamars.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pamars.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.pamars.page = 1
      this.getList()
    },
    // 新增 / 修改
    addOrUpdateHandle (id, distribution) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id, distribution)
      })
    },
    // 设置商家提现比列
    setWithdrawHandle (row) {
      this.shop_id = row.id
      this.commission_rate = row.commission_rate
      this.withdrawVisible = true
    },
    submitWithdraw () {
      seviceApi.setWithdraw({
        shop_id: this.shop_id,
        commission_rate: this.commission_rate
      }).then(res => {
        if (res && res.data.code == 200) {
          this.$message.success('保存成功')
          this.withdrawVisible = false;
          this.getList()
        }
      })
    },
    // 查看
    lookOver (id, type) {
      this.details = true
      this.$nextTick(() => {
        this.$refs.merchantDetails.init(id, type)
      })
    },
    // 修改
    updateData (id) {
      this.updateShow = true;
      setTimeout(() => {
        this.$refs.detail.init(id, 0)
      }, 100)
    },
  }
}
</script>
